<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
	<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
	<link rel="stylesheet" type="text/css" href="/boke/css/me.css"/>
</head>
<body>
	<!--导航-->
<nav class="ui inverted attached segment m-padded-tb-mini" >
	<div class="ui container">
		<div class="ui inverted secondary stackable menu">
			<h2 class="ui teal header item">Bk</h2>
			<a href="/boke/view/index" class="active m-item item m-mobile-hide"><i class="mini home icon"></i>首页</a>
			<a href="/boke/view/types" class="m-item item m-mobile-hide"><i class="mini idea icon"></i>分类</a>
			<a href="/boke/view/tags" class="m-item item m-mobile-hide"><i class="mini tags icon"></i>标签</a>
			<a href="/boke/view/about" class="m-item item m-mobile-hide"><i class="mini info icon"></i>关于我</a>
			<div class="right item m-mobile-hide">
				<div class="ui icon input">
<!--					<input type="text" placeholder="Search....">-->
<!--					<i class="search link icon"></i>-->
				</div>
			</div>
		</div>
	</div>
	<!--	搜索-->
<!--	<a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show">-->
<!--		<i class="sidebar icon"></i>-->
<!--	</a>-->
</nav>




	<!--中间内容-->
	<div class="m-container m-padded-tb-big">
		<div class="ui container">
			<div class="ui  stackable  grid">
				<!--左边的博客列表-->
				<div cLass="eleven wide column">
					<!--header头部-->
					<div class="ui top attached segment">
						<div class="ui middle aligned two column grid">
							<div class="column">
								<h3 class="ui teal header">博客</h3>
							</div>
							<div class="right aligned column">
								共<h2 class="ui orange header m-inline-block m-text-thin" th:text="${blogcount}"> &nbsp;&nbsp; </h2>篇
							</div>
						</div>
					</div>

					<!--content中间内容-->
					<div class="ui attached segment">
						<div class="ui padded vertical segment m-padded-tb-large" th:each="blog,blogzt:${bloglist}">
							<div class="ui mobile reversed stackable grid">
								<div class="eleven wide column">
									<a th:href="@{|/view/blogs?blogId=${blog.getId()}|}"><h3 class="ui header" th:text="${blog.getTitle()}"></h3></a>
									<br>
									<p class="m-text" th:text="|${blog.getOmitcontent()}......|">不由的看了一些诗词,略微感慨下情绪纷杂,记录下财务自由的概念,笑来老师对财富自由新解刷新我的认知。 什么是财富自由?我所理解的财富自由就是无需为生活开销而...</p>
									<div class="ui grid">
										<div class="row">
											<div class="eleven wide column">
											<div class="ui horizontal link list">
												<div class="item">
													<img th:src="@{/images/grtx.jpg}" alt="" class="ui avatar image">
													<div class="content">
														<a th:href="@{|/view/about|}" class="header" th:text="${user.getNickname()}">李小</a>
													</div>
												</div>
												<div class="item">
													<i class="calendar icon"></i>&nbsp;<span th:text="${blog.getCreateDate()}">2017-10-6</span>
												</div>
												<div class="item">
													<i class="eye icon"></i>&nbsp;<span th:text="${blog.getViews()}">233</span>
												</div>

											</div>

										</div>
											<div class="right aligned five wide column">
												<a th:href="@{|/view/types?typeName=${typelist.get(blogzt.index)}|}" target="_blank" class="ui teal basic label m-padded-tiny" th:text="${typelist.get(blogzt.index)}">认知升级</a>
											</div>
										</div>
										<div>
											<div class="column">
												<a th:href="@{|/view/tags?tagName=${tag.getName()}|}" th:each="tag,tagzt:${blog.getTagList()}" th:text="${tag.getName()}" class="ui basic teal left pointing label m-padded-mini m-text-thin">121212</a>
											</div>
										</div>

									</div>
								</div>

								<div class="five wide column">
									<a th:href="@{|/view/blogs?blogId=${blog.getId()}|}" target="_blank" >
										<img th:src="${blog.getFirstPicture()}" alt="" class="ui rounded image" style="width: 400px;height: 150px" >
									</a>
								</div>

							</div>
						</div>
					</div>

					<!--footer底部内容-->
					<div class="ui bottom attached segment">
						<div class="ui middle aligned two column grid">
							<div class="column">
								<a th:href="@{|/view/index?pc=${pc-1}|}" th:classappend="${hasPrevious} ? '' : 'disabled'" class="ui mini teal basic button">上一页</a>
							</div>
							<div class="right aligned column">
								<a th:href="@{|/view/index?pc=${pc+1}|}" th:classappend="${hasNext} ? '' : 'disabled'" class="ui mini teal basic button">下一页</a>
							</div>
						</div>
					</div>

				</div>

				<!--右边的top-->
				<div class="five wide column">
					<!--分类-->
					<div class="ui segments">
						<div class="ui secondary segment ">
							<div class="ui two column grid">
								<div class=" column">
									<i class="idea icon"></i>分类
								</div>
								<div class="right aligned column">
									<a href="/boke/view/types" target="_blank">more <i class="angle double right icon"></i></a>
								</div>
							</div>
						</div>
						<div class="ui teal segment">
							<div class="ui fluid vertical menu">
								<a th:each="typecount,typecountzt:${stringLongtypeMap}" th:href="@{|/view/types?typeName=${typecount.getKey()}|}" class="item">
									<span th:if="${typecountzt.count <= 5}" th:text="${typecount.getKey}"></span>
									<div th:if="${typecountzt.count <= 5}" class="ui teal basic left pointing label" th:text="${typecount.getValue()}"></div>
								</a>
							</div>
						</div>
					</div>
					<!--标签-->
					<div class="ui segments m-margin-large">
						<div class="ui secondary segment ">
							<div class="ui two column grid">
								<div class=" column">
									<i class="tag icon"></i>标签
								</div>
								<div class="right aligned column">
									<a href="/boke/view/tags" target="_blank">more <i class="angle double right icon"></i></a>
								</div>
							</div>
						</div>
						<div class="ui teal segment">
							<a th:each="tagcount,tagcountzt:${stringLongtagMap}" th:href="@{|/view/tags?tagName=${tagcount.getKey()}|}" target="_blank" class="ui teal basic left pointing label m-margin-tb-tiny">
								<span th:if="${tagcountzt.count <= 10}" th:text="${tagcount.getKey()}"></span>
								<div th:if="${tagcountzt.count <= 10}" th:text="${tagcount.getValue()}" class="detail">23</div>
							</a>

						</div>
					</div>

					<!--最新推荐-->
					<div class="ui segments m-margin-large">
						<div class="ui secondary segment m-black">
							<i class="bookmark icon"></i>最新推荐
						</div>
						<div th:each="blog,LatestRecommendedzt:${LatestRecommended}" class="ui segment" style="position: relative">
							<a th:href="@{|/view/blogs?blogId=${blog.getId()}|}" target="_blank" class="m-black m-text-thin" th:text="${blog.getTitle()}">用户故事(User Story)</a>
							<div th:text="${blog.getType().getName()}"  class="ui teal basic left pointing label" style="position: absolute;right: 20px;margin: -4px 0px 20px"></div>
						</div>
					</div>

					<!--二维码-->
					<h4 class="ui horizontal divided header m-margin-large"></h4>
					<div class="ui centered card" style="width: 11em">
						<img src="/boke/images/grwx.jpg" alt="" class="ui rounded image" >
					</div>

				</div>
			</div>
		</div>
	</div>



	<!--尾部-->
	<footer class="ui inverted vertical segment m-padded-tb-massive">
		<div class="ui center aligned container">
			<div class="ui inverted divided stackable grid">
				<div class="three wide coLumn">
					<div class="ui inverted link list">
						<div class="item">
							<img src="/boke/images/grwx.jpg" class="ui rounded imagel img" alt="" style="width: 100px;">
						</div>
					</div>
				</div>
				<div class ="three wide column">
					<h4 class="ui inverted header m-text-thin m-text-spaced ">最新博客</h4>
					<div class="ui inverted link list">
						<a href="#" class="item">用户故事</a>
						<a href="#" class="item">用户故事</a>
						<a href="#" class="item">用户故事</a>
					</div>
				</div>
				<div class="three wide column">
					<h4 class="ui inverted header m-text-thin m-text-spaced ">最新博客</h4>
					<div class="ui inverted link list">
						<a href="#" class="item">用户故事</a>
						<a href="#" class="item">用户故事</a>
						<a href="#" class="item">用户故事</a>
					</div>
				</div>
				<div class="seven wide column">
					<h4 class="ui inverted header m-text-thin m-text-spaced">最新博客</h4>
					<p class="ui m-text-thin m-text-spaced m-opacity-mini">探索我们“天天向上”的所有方法。了解我们的品牌标志。了解我们的安全流程。了解我们的贡献。者跳到我们的首页。</p>
				</div>
			</div>
		</div>
		<div class="ui inverted section divider">
			<p style="text-align: center; margin-top: 40px;" class="m-text-thin m-text-spaced m-opacity-mini">开发于2021.3.20</p>
		</div>

	</footer>
<script>
	$('.menu.toggle').click(function () {
		$('.m-item').toggleClass('m-mobile-hide');
	})
</script>
</body>
</html>
